import { ResponseCode } from "@/enum/ResponseCode";
import { getAppAnswerCount } from "@/servers/api/appStatisticController";
import { Column } from "@ant-design/charts";
import { Message } from "@arco-design/web-react";
import { useEffect, useState } from "react";
export default () => {
  const [data, setData] = useState<API.AppAnswerCountVO[]>();
  const [config, setConfig] = useState({
    title: {
      title: "应用热门排行榜",
      titleFontSize: 25,
    },
    data,
    xField: "appId",
    yField: "answerCount",
    style: {
      fill: (data: API.AppAnswerCountVO) => {
        return "#2989FF";
      },
    },
    label: {
      text: (originData: API.AppAnswerCountVO) => {
        return "";
      },
      position: "inside",
      transform: [
        {
          type: "overflowHide",
        },
      ],
    },
    tooltip: {
      title: (data: API.AppAnswerCountVO) => data.appName,
    },
    legend: false,
  });
  const loadData = async () => {
    let res = await getAppAnswerCount();
    if (res.data.code === ResponseCode.SUCCESS) {
      setData(res.data.data as API.AppAnswerCountVO[]);
      setConfig({ ...config, data: res.data.data });
    } else {
      Message.error(res.data.message as string);
    }
  };
  useEffect(() => {
    loadData();
  }, []);
  return (
    <Column
      {...config}
      containerStyle={{
        background: "white",
        borderRadius: "10px",
        height: "350px",
      }}
    />
  );
};
